<template>
  <div class="mainBody">
    <div class="mainImgBox">
      <div class="titleTop">
        <span class="fontHt">番剧列表</span>
      </div>
      <img src="http://mcgamehome.love/img/background/qOUe5d.jpg" alt="http://mcgamehome.love/img/background/qOUe5d.jpg">
    </div>
    <div class="nrBody">
      <div class="addVideoUrlBox">
        <!--      <div class="addWaike">-->
        <div class="addOne"><span>视频id搜索</span>
          <input class="commentInput marl20" v-model.trim="OneId" type="text" placeholder="视频id"><button type="button" class="commentUpButton zdy fontHt" @click="getUrl">搜索</button></div>
        <div class="addOne"><span class="mar-l-10">多id搜索</span>
          <input class="commentInput" v-model.trim="listOneId" type="text" placeholder="多id搜索用英文逗号分隔"><button type="button" class="commentUpButton zdy fontHt">搜索</button></div>
      </div>
      <div class="table-waike">
        <table class="table-one">
          <thead class="table__thead">
          <tr class="tr-p2">
            <th class="p-def tr-p">视频ID</th>
            <th class="p-def tr-p">视频类型</th>
            <th class="p-def tr-p">视频名称</th>
            <th class="p-def tr-p">视频集数</th>
            <th class="p-def tr-p">视频大图</th>
            <th class="p-def tr-p">视频年份</th>
            <th class="p-def tr-p">操作</th>
          </tr>
          </thead>
          <tbody class="table__tbody">
          <tr class="table-row" v-for="(item,index) in addForms.items.list" :key="item.id">
            <td class="table-row__td1">
              <span class="table-row__progress">{{item.id}}</span>
            </td>


            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--blue ">{{item.vType}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1 ">
              <span class="table-row__progress status--green" :title="item.vName">{{item.vName}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--red">{{item.vEpic}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--blue " :title="item.vImgL">{{ item.vImgL }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--red">{{ item.vTime }}</span>
            </td>

            <td class="table-row__td">
              <div class="table-one-div">
<!--                <a href="" >-->
                  <div class="svg" @click="set(item.id)">
                    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"><g>	<g>		<path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>--%>
						                                        <path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>--%>
                      <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                  </div>
<!--                </a>-->
                <a @click="" class="a-def"><div class="span-wk"><span class="c-white">删除</span></div></a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="table-waike">
        <table class="table-one">
          <thead class="table__thead">
          <tr class="tr-p2">
            <th class="p-def tr-p">视频ID</th>
            <th class="p-def tr-p">视频类型</th>
            <th class="p-def tr-p">视频名称</th>
            <th class="p-def tr-p">视频集数</th>
            <th class="p-def tr-p">视频大图</th>
            <th class="p-def tr-p">视频年份</th>
            <th class="p-def tr-p">操作</th>
          </tr>
          </thead>
          <tbody class="table__tbody">
          <tr class="table-row">
            <td class="table-row__td1">
              <span class="table-row__progress">{{addForms.item.id}}</span>
            </td>


            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--blue ">{{addForms.item.vType}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1 " >
              <span class="table-row__progress status--green" :title="addForms.item.vName">{{addForms.item.vName}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--red">{{addForms.item.vEpic}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1" >
              <span class="table-row__progress status--blue " :title="addForms.item.vImgL">{{ addForms.item.vImgL }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--red">{{ addForms.item.vTime }}</span>
            </td>

            <td class="table-row__td">
              <div class="table-one-div">
                <!--                <a href="" >-->
                <div class="svg" @click="set(addForms.item.id)">
                  <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"><g>	<g>		<path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>--%>
						                                        <path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>--%>
                    <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                </div>
                <!--                </a>-->
                <a @click="" class="a-def"><div class="span-wk"><span class="c-white">删除</span></div></a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="pageBox" v-show="addForms.items.navigateFirstPage !== 0 && addForms.items.navigateFirstPage !== undefined">
        <div class="pageBoxOne">
          <button class="pageButton fontHt" type="button" @click="page(1)">&lt</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.navigateFirstPage)" :class="{active:addForms.items.pageNum === addForms.items.navigateFirstPage}"  v-show="addForms.items.isFirstPage">{{addForms.items.navigateFirstPage}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum-3)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum-3 >= addForms.items.navigateFirstPage">{{addForms.items.pageNum-3}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum-2)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum-2 >= addForms.items.navigateFirstPage">{{addForms.items.pageNum-2}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum-1)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum-1 >= addForms.items.navigateFirstPage">{{addForms.items.pageNum-1}}</button>
          <button class="pageButton fontHt" type="button" :class="{active:addForms.items.pageNum}" v-show="addForms.items.pageNum !== addForms.items.navigateFirstPage && addForms.items.pageNum !== addForms.items.navigateLastPage">{{addForms.items.pageNum}}</button>
          <button class="pageButton fontHt" type="button" :class="{none:addForms.items.navigateLastPage <= 3}">...</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum+1)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum <= addForms.items.navigateLastPage-1">{{addForms.items.pageNum+1}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum+2)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum <= addForms.items.navigateLastPage-2">{{addForms.items.pageNum+2}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.pageNum+3)" :class="{active:addForms.items.pageNum === lestPage}" v-show="addForms.items.pageNum <= addForms.items.navigateLastPage-3">{{addForms.items.pageNum+3}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.navigateLastPage)" :class="{active:addForms.items.pageNum === addForms.items.navigateLastPage}" v-show="addForms.items.isLastPage && addForms.items.pageNum !== 1">{{addForms.items.navigateLastPage}}</button>
          <button class="pageButton fontHt" type="button" @click="page(addForms.items.navigateLastPage)">></button>
        </div>
      </div>
    </div>
  </div>
  <div class="tipMsgBox" :class="{activeMsg:tip !== ''}" v-show="tip !== ''">
    <span>
      <svg  xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="exclamation" viewBox="0 0 16 16">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
        </svg>
      {{tip}}</span>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import Hls from "hls.js";
import API from "@/api/AxiosConfig";
import {useRouter} from "vue-router";

const router = useRouter()
const OneId = ref(null)
const listOneId = ref(null)
const lestPage = ref('1')
const tip = ref('')
const addForms = reactive({
  items:[],
  listId:[],
  one:[],
  item:[]
})
onMounted(() => {
  api(0)
})
function api(i) {
  API({ url: '/api/videoList/'+i+'/10', method: 'get' }).then(res => {
    addForms.items = res.data
  }).catch(err => {
    // console.log(err)
  })
}
function getUrl(){
  API({ url: '/api/videoOne/'+OneId.value, method: 'get' }).then(res => {
    addForms.item = res.data
  }).catch(err => {
    // console.log(err)
  })
}
function page(i){
  lestPage.value = ''+i+''
  api(i,10)
}
function set(i) {
  router.push({path:'/adminI-AM-WASTE/videoAdd',query:{id:''+i+''}})
}
</script>

<style lang="less" scoped>

.pageBox{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 25px 25px 65px 25px;
}
.pageButton{
  background-color: rgba(238, 238, 238, 0.6);
  border-radius: 4px;
  border: none;
  color: black;
  padding: 10px 15px;
  margin: 0 5px;
}
.pageButton:hover{
  color: #00AEEC;
}
.table-waike{
  margin-top: 30px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-left: 15px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.marl20{
  margin-left: 18px;
}
.mar-l-10{
  margin-left: 10px;
}
.addOne{
  flex: 1;
  display: flex;
  margin: 10px 0;
}
.addOne>span{
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 10px;
}
.addVideoUrlBox{
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.tr-p2{
  display: flex;
  width: 100%;
}
.table-row{
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e4e9ea;
  background-color: #fff;
}
.table__tbody{
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.svg{
  width: 32px;
  height: 17px;
  padding: 5px 10px;
  border-radius: 50px;
}
.svg:hover{
  background-color: #cee6ff;
}
.svg>svg{
  width: 15px;
  height: 15px;
}
.table-one-div{
  display: flex;

}
.table__th {
  color: #9eabb4;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  border:0 !important;
  padding: 15px 8px !important;
}

.table__th:hover {
  color: #01b9d1;
}

.table--select-all {
  width: 18px;
  height: 18px;
  padding: 0 !important;
  border-radius: 50%;
  border: 2px solid #3fd2ea;
}
.table-row__td {
  display: flex;
  padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
.table-row__td1 {
  display: flex;
  //padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  //max-width: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.table-row__td2 {
  display: flex;
  padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 2;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  min-width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.table-row__tds {
  padding: 10px 15px !important;
  vertical-align: middle !important;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  line-height: 18px !important;
  border:0 !important;
  max-width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}

.table-row__img{
  width: 36px;
  height: 36px;
  display: inline-block;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.table-row__info {
  display: inline-block;
  padding-left: 12px;
  vertical-align: middle;
}

.table-row__name {
  color: #53646f;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0px;
}

.table-row__small {
  color: #9eabb4;
  font-weight: 300;
  font-size: 12px;
}

.table-row__policy {
  color: #53646f;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0px;
}
.table-row__p-status {
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;
  color: #9eabb4;
}


.table-row__status{
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;

}


.table-row__progress{
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;
  font-family: 黑体;
  font-weight: bold;
}

.status:before{
  content: '';
  margin-bottom: 0;
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  color: #1de9b6;
}

.status--red{
  color: #e36767;
}

.status--blue{
  color: #3fd2ea;
}

.status--yellow{
  color: #ecce4e;
}

.status--green{
  color: #00897b;
}

.status--grey{
  color: #9eabb4;
}


.table__select-row {
  appearence: none;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 0 0 5px !important;
  vertical-align: middle;

  border-radius: 50%;
  cursor: pointer;
}

.table__select-row:hover{
  border-color:#01b9d1;
}


.table-row--overdue {
  width: 3px;
  background-color: #e36767;
  display: inline-block;
  position: absolute;
  height: calc(100% - 24px);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.table-row__edit {
  padding: 8px 17px;
  display: inline-block;
  background-color: #daf3f8;
  border-radius: 18px;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}

.table-row__bin {
  width: 16px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.table__thead {
  border-bottom: 4px solid #aaaaff;
  display: flex;
}
.tr-p{
  text-align: center;
  flex: 1;
}
.tr-p2{
  text-align: center;
  flex: 2;
  justify-content: center;
}
.table-one{
  width: 100%;
}
.span-wk{
  padding: 6px 15px;
  border-radius: 50px;
  user-select: none;
  font-family: 黑体;
  font-weight: bold;
}
.span-wk:hover{
  background-color: #ffe0e0;
}
.nrBody{
  display: flex;
  padding: 35px 35px;
  flex-direction: column;
  font-family: 黑体;
  font-weight: bold;
}
.mainBody{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.mainImgBox{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.mainImgBox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.titleTop{
  color: #FFFFFF;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  z-index: 1;
  user-select: none;
}
.fontHt{
  font-family: 黑体;
  font-weight: bold;
}
@media screen and (min-width: 2061px) {
  .nrBody {
    width: 1680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .nrBody {
    margin: 0 70px 0 70px;
  }
}
.active{
  background-color: #DFF6FD;
  color: #00AEEC;
}
</style>
